import React from "react";
import { Navigate, type RouteObject } from "react-router";
import RouterGuard from "./RouterGuard";
import Lazyload from "@/components/Lazyload";
import Loading from "@/components/Loading";

/**
 * @description 📚 路由参数配置简介
 * @param path ==> 路由菜单访问路径
 * @param element ==> 前端组件文件路径
 * @param redirect ==> 当点击面包屑目录时路由重定向地址（该属性需写在一级目录路由上）
 * @param meta ==> 路由菜单元信息
 * @param meta.key ==> 相当于vue-router的name属性(如果不设置则面包屑导航会出现问题)
 * @param meta.title ==> 路由标题 (用作 document.title || 菜单的名称)
 * @param meta.icon ==> 菜单和面包屑对应的图标（支持antd和iconPark图标），字节图标库链接（https://iconpark.oceanengine.com/official）
 * @param meta.isLink ==> 是否为外链 (如果是的话会开启新的标签页访问)
 * @param meta.isHide ==> 是否需要隐藏菜单 (通常列表详情页需要隐藏)
 * @param meta.isFull ==> 当前是菜单内容否在需要全屏展示
 * @param meta.isAffix ==> 当前菜单是否需要固定在标签栏中 (如果固定则该菜单标签不会展示关闭图标)
 * @param meta.isKeepAlive ==> 当前菜单是否开启路由缓存
 * @param meta.activeMenu ==> 激活高亮左侧菜单位置（需要写在二级路由后的嵌套路由每一个meta里，主要是为了页面处于嵌套路由中默认选中并高亮父级菜单）
 * */
const staticRoutes: RouteObject[] = [
  {
    path: "/",
    element: <Navigate to="/home" />
  },
  {
    path: "/login",
    element: <Lazyload>{React.lazy(() => import("@/views/login"))}</Lazyload>,
    loader: () => ({ title: "登录" })
  },
  {
    path: "/404",
    element: <Lazyload>{React.lazy(() => import("@/components/NotFound"))}</Lazyload>,
    loader: () => ({ title: "404" })
  },
  {
    path: "*",
    element: <Loading />
  }
];

const routes = staticRoutes.flatMap((item) => [
  {
    ...item,
    element: <RouterGuard>{item.element}</RouterGuard>,
    hydrateFallbackElement: <Loading />
  }
]);

export const staticRenderRoutes = routes;
